import React, {JSX, useCallback} from 'react';
import {View, TouchableOpacity, StyleSheet} from 'react-native';
import {useMakeMoneyContext} from '../index';
import {BasicText} from '../../../kit/text';
import {useTranslation} from 'react-i18next';
import {useUserContext} from '../../../context/UserContext';
import {useNavigate} from '../../../navigate/navigate';
import { normalize } from '../../../utils/adapter';

type Props = {};

const RedEnvlope = React.memo(function ({}: Props): JSX.Element {
  const makeMoneyCtx = useMakeMoneyContext();
  const {t} = useTranslation();
  const userCtx = useUserContext();
  const navigate = useNavigate();

  const handleWithdrwal = useCallback(() => {
    userCtx?.state.isBindAliPay
      ? navigate.navigateWithdrawal()
      : navigate.navigateBindAliPay();
  }, [navigate, userCtx?.state.isBindAliPay]);

  return (
    <View style={styles.container}>
      <View style={styles.title_container}>
        <BasicText fontSize={normalize(12)}>{t('siginTitle')}</BasicText>
      </View>
      <View style={styles.main}>
        <View style={styles.left}>
          <BasicText fontSize={normalize(30)}>{makeMoneyCtx?.redNum}</BasicText>
          <View style={styles.red_unit_text}>
            <BasicText fontSize={normalize(12)}>{t('redEnvelope')}</BasicText>
          </View>
        </View>
        <View>
          <TouchableOpacity style={styles.opacity} onPress={handleWithdrwal}>
            <BasicText fontSize={normalize(16)} color="#FE6829">
              {t('withdrawal')}
            </BasicText>
          </TouchableOpacity>
        </View>
      </View>
      <View>
        <BasicText fontSize={normalize(12)} color="rgba(255,255,255,0.5)">
          {t('siginRemarks')}
        </BasicText>
      </View>
    </View>
  );
});

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: normalize(30),
  },
  title_container: {
    marginBottom: normalize(12),
  },
  main: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  left: {
    flexDirection: 'row',
    alignItems: 'flex-end',
  },
  red_unit_text: {
    marginBottom: normalize(8),
    marginLeft: normalize(8),
  },
  opacity: {
    width: normalize(94),
    height: normalize(38),
    borderRadius: normalize(8),
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default RedEnvlope;
